<template>
  <div>
    <NavBar>
      <template v-slot:default>商品详情:{{ id }}</template>
    </NavBar>
    <div class="detail" style="margin-top: 45px">
      <van-image width="100%" lazy-load :src="detail.cover_url" style="margin-left: 20px;width: 90%;height: 250px" />
      <van-card style="text-align:left" :num="detail.stock" :price="detail.price + '.00'" :desc="detail.description"
        :title="detail.title">
        <template #tags>
          <van-tag plain type="danger">新书</van-tag>
          <van-tag plain type="danger" style="margin-left: 10px">推荐</van-tag>
        </template>
        <template #footer>
          <van-button type="warning" @click="handleAddCart">加入购物车</van-button>
          <van-button type="danger" @click="goToCart">立即购买</van-button>
        </template>
      </van-card>
      <van-tabs v-model="active">
        <van-tab title="概述">
          <div class="content3" v-html="detail.details"></div>
        </van-tab>
        <van-tab title="热评">
          <div style="text-align: center;margin-top: 20px">暂时还没有热评呢</div>
        </van-tab>
        <van-tab title="相关图书">
          <div>
            <GoodsList :goodsList="like_goods" />
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import NavBar from "@/components/common/navbar";
import GoodsList from '@/components/content/goods/index'
import { useRoute, useRouter } from 'vue-router'
import { useStore } from 'vuex'
import { ref, reactive, toRefs, onMounted, getCurrentInstance } from 'vue'
import { Notify } from "vant";
export default {
  name: "index",
  components: {
    NavBar,
    GoodsList
  },
  setup() {
    const store = useStore()
    let active = ref(0)
    const route = useRoute()
    const router = useRouter()
    const { proxy } = getCurrentInstance()
    let book = reactive({
      detail: {},
      like_goods: [],
      comments: []
    })
    let id = ref(0)
    onMounted(() => {
      id.value = route.query.id
      proxy.$API.detail.getDetail(id.value).then(res => {
        book.detail = res.goods
        book.like_goods = res.like_goods
      })
    })
    const handleAddCart = () => {
      proxy.$API.cart.addCart({ goods_id: book.detail.id, num: 1 }).then(res => {
        if (res.status == '204' || res.status == '201') {
          Notify('添加成功')
          store.dispatch('updateCart')
        }
      })
    }
    const goToCart = () => {
      proxy.$API.cart.addCart({ goods_id: book.detail.id, num: 1 }).then(res => {
        if (res.status == '204' || res.status == '201') {
          Notify('添加成功到购物车')
          store.dispatch('updateCart')
          router.push({
            path: '/shopCart'
          })
        }
      })
    }
    return {
      id,
      ...toRefs(book),
      active,
      handleAddCart,
      goToCart
    }
  }
}
</script>

<style>
.content3 img {
  min-height: 2000px !important;
  /*必须要去掉scoped不然不能修改v-html解析的标签的大小*/
  width: 100%;
}
</style>
